<template>
  <div id="app">
    <!-- 3.使用组件 -->
    <HmHead />
    <HmBody />
    <HmFoot />
    <!-- <input type="date">
    <button @click="clickMy">点我一下</button>
    <div class="box"> 我是一个盒子</div> -->
  </div>
</template>

<script>
// 1. 导入要使用的组件
import HmHead from './components/HmHead.vue';
import HmBody from './components/HmBody.vue';
import HmFoot from './components/HmFoot.vue';
export default {
  name: 'App',
  // 2. 局部注册组件
  components: {
    HmHead,
    HmBody,
    HmFoot
  },
  methods: {
    clickMy() {
      alert('点我干嘛')
    }
  }
}
</script>

<style lang="less">
@bwidth: 100px;
@bcolor: red;

#app {
  width: @bwidth * 8;
  height: @bwidth * 6;
  background-color: pink;
}

#app .box {
  width: @bwidth * 3;
  height: @bwidth * 2;
  background-color: olivedrab;
}
</style>
